<template>
	<view class='box'>
		<view v-if="list.length != 0">
			<view class="boxCont">
				<!-- 头部标题 -->
				<view class="head">
					<view class="headLeft">
						<text class="iconfont icon-shangjia"></text>
						<text class="tit">店铺名字</text>
						<text class="iconfont icon-xiangyou1 gray"></text>
					</view>
					
					<view class="headRight">
						<text class="iconfont icon-tuikuan"></text>
						<text class="gray">退款/退货</text>
					</view>
				</view>
				<view class="centerCont">
					<view class="image">
						<image src="../../static/cart.png" mode="aspectFill"></image>
					</view>
					<view class="rightCont">
						<view class="title line-clamp2">退款成功退款成功退款成功退款成功退款成功退款成功退款成功退款成功退款成功退款成功退款成功退款成功</view>
						<view class="spec">退款成功退款成功退款成功</view>
						<view class="returnPrice">
							退款: <text class="littleMon"> ￥</text>
							590
						</view>
					</view>
				</view>
				<view class="bottomCont">
					<view class="tips">
						<text class="weight">退款成功</text>
						<text class="success">退款成功￥59元</text>
					</view>
					<view class="button">
						<button @click="goPage('./returnOrderDetail')" size="mini" class="selectBtn" plain>查看详情</button>
					</view>
				</view>
			</view>
			<uni-load-more :status="status" :icon-size="14" :content-text="contentText" />
		</view>
		
		<xw-empty v-else :isShow="emptyShow" text="暂无相关订单数据" textColor="#777777"></xw-empty>
	</view>
</template>

<script>
	import xwEmpty from '@/pageA/uni_modules/xw-empty/xw-empty.vue';
	export default{
		components:{
			xwEmpty
		},
		data(){
			return{
				emptyShow:true,//true显示，false隐藏
				
				ifBottomRefresh: false,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多~',
					contentrefresh: '加载中',
					contentnomore: '暂无更多~'
				},
				params: {
					pageNo: 1,
					pageSize: 10,
				},
				
				list:[1],
			}
		},
		//触底加载状态
		onReachBottom() {
			if (this.status != 'noMore') {
				this.status = 'loading';
				this.ifBottomRefresh = true
				// this.getlist()
			}
		},
		onLoad() {
			
		},
		methods:{			
			goPage(url){
				uni.navigateTo({
					url
				})
			},
		},
	}
</script>

<style lang='scss' scoped>
	.box{
		padding: 20rpx;
	}
	.boxCont{
		background-color: #fff;
		padding: 20rpx;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		
		.head{
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.gray{
				color: #8d8d8d;
			}
			.headLeft{
				
				.icon-shangjia{
					font-size: 35rpx;
					margin-right: 10rpx;
					font-weight: bold;
					color: #666;
					vertical-align: text-bottom;
				}
				.tit{
					font-weight: bold;
					font-size: 32rpx;
				}
			}
			.headRight{
				.icon-tuikuan{
					color: #d13635;
					margin-right: 10rpx;
					font-size: 35rpx;
					vertical-align: text-bottom;
				}
			}
		}
		.centerCont{
			margin-top: 40rpx;
			position: relative;
			display: flex;
			height: 150rpx;
			margin-bottom: 20rpx;
			
			.image{
				width: 150rpx;
				height: 150rpx;
				position: absolute;
				border-radius: 20rpx;
				border: 2rpx solid #eee;
				
				image{
					width: 100%;
					height: 100%;
				}
			}
			.rightCont{
				margin-left: 170rpx;
				font-size: 28rpx;
				
				.spec{
					font-size: 25rpx;
					color: #9f9f9f;
					margin: 7rpx 0 10rpx;
				}
				.returnPrice{
					.littleMon{
						margin-left: 10rpx;
					}
				}
			}
		}
		
		.bottomCont{
			.tips{
				background-color: #fafafa;
				padding: 20rpx 30rpx;
				margin-bottom: 20rpx;
				height: 60rpx;
				line-height: 60rpx;
				
				.weight{
					font-weight: bold;
					right: 20rpx;
					margin-right: 20rpx;
					font-size: 30rpx;
				}
				.success{
					font-size: 28rpx;
				}
			}
			.button{
				text-align: right;
				.selectBtn{
					color: #e74a07;
					border-radius: 100rpx;
					border: 2rpx solid #e74a07;
				}
			}
		}
	}
</style>